<template>
    <view class="bg-content">
        <u-sticky>
            <div style="height: 84px; border-bottom: 1rpx solid #eeeeee; background-color: #FFFFFF;">
                <u-search :placeholder="tabList[activeTabIndex].searchPlaceholder" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>
                <u-tabs :list="tabList" name="title" active-color="red" :is-scroll="false" :current="activeTabIndex" @change="onTabChange"></u-tabs>
            </div>
        </u-sticky>

        <goodsAfterSaleApply ref="goodsAfterSaleApplyRef" v-if="activeTabIndex === 0"></goodsAfterSaleApply>
        <goodsAfterSaleHandling ref="goodsAfterSaleHandlingRef" v-if="activeTabIndex === 1"></goodsAfterSaleHandling>
        <goodsAfterSaleRecord ref="goodsAfterSaleRecordRef" v-if="activeTabIndex === 2"></goodsAfterSaleRecord>
    </view>
</template>

<script>

    import goodsAfterSaleApply from './goods-after-sale-apply'
    import goodsAfterSaleHandling from './goods-after-sale-handling'
    import goodsAfterSaleRecord from './goods-after-sale-record'
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                searchKeyword: '',
                tabList: [
                    {searchPlaceholder: '商品名称/订单号/支付流水号', title: '售后申请', ref: 'goodsAfterSaleApplyRef'},
                    {searchPlaceholder: '商品名称/订单号/服务单号', title: '处理中', ref: 'goodsAfterSaleHandlingRef'},
                    {searchPlaceholder: '商品名称/订单号/服务单号', title: '申请记录', ref: 'goodsAfterSaleRecordRef'},
                ],
                activeTabIndex: -1,
            }
        },
        components: {
            goodsAfterSaleApply,
            goodsAfterSaleHandling,
            goodsAfterSaleRecord
        },
        onShow() {
            this.activeTabIndex = parseInt(this.urlParams.activeTabIndex);
            this.$forceUpdate();
        },
        watch: {
            activeTabIndex: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    const _self = this;
                    console.log("activeTabIndex参数改变，即将刷新...", `新值：${newVal}`, `旧值：${oldVal}`);
                    _self.$nextTick(() => {
                        _self.$refs[_self.tabList[_self.activeTabIndex].ref].doRefresh(_self.$refs[_self.tabList[_self.activeTabIndex].ref].dataList);
                    });
                }
            }
        },
        // 上拉加载
        onReachBottom: function () {
            const _self = this;
            if (_self.$refs[_self.tabList[_self.activeTabIndex].ref].pagination.hasNextPage) {
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].doInfinite();
            }
        },
        methods: {
            onSearch() {
                const _self = this;
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].searchKeyword = CommonUtil.trim(this.searchKeyword);
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].doRefresh(_self.$refs[_self.tabList[_self.activeTabIndex].ref].dataList)
            },
            onTabChange(index) {
                this.activeTabIndex = index;
                this.urlParams.activeTabIndex = this.activeTabIndex;
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
